<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>视频预览</title>
	<link href="../../statics/video/css/video-js.css" rel="stylesheet"/>
	<script src="../../statics/video/js/video.min.js"></script>
	<script src="../../statics/video/js/videojs-contrib-hls.min.js"></script>

	<style>
		body{background-color: #191919}
		
		#example-video{
			margin: 0 auto;
			width: 100%;
			height:370px;
		}
		.wenzi{
		    position: relative;
		    float: left;
		    top: -10px;
		    color: #f00;
		    width: 230px;
		    height: 20px;
		    z-index:1;
		    background-color: #fff;
		}
	</style>
</head>

<body>
	<div id="rrapp">
		<div id="wenzi" class="wenzi" style="display: block;" >预览时间还剩<span id="djs">30</span>秒。<span style="text-decoration:underline;cursor:pointer"  onclick="jixu()" >继续预览</span></div>
		<video id="example-video" class="video-js" autoplay="autoplay" controls preload="auto"
		       width="600" height="800" > 
		    <!-- <source src="http://193.112.101.157:8080/hls/test.m3u8" type="application/x-mpegURL" /> -->
		     <source src="http://47.100.79.18:6713/mag/hls/b7e2ba191e8b4d919e3531871b357914/1/live.m3u8" type="application/x-mpegURL">
		</video>
		
	</div>
</body>
<script>
var player;
window.onload = function() {
		player = videojs('example-video');
		player.play();
daojishi();
}
var timer;
function daojishi(){
        clearInterval(timer); //清除计时器  
        var that = this;
        that.disabled = true;
        var count = 30;
       timer = setInterval(function(){
          if(count>0){
            count--;
            document.getElementById("djs").innerHTML=count;
          }else{
            player.pause();
            clearInterval(timer); //清除计时器
          }
        },1000);
 }
 
 function jixu(){
 	document.getElementById("wenzi").style.display="none";
 	player.play();
    clearInterval(timer);
 }

</script>
</html>
